<template>
  <div class="app-container">
    <el-card>
      <el-form :inline="true" :model="interView" ref="interView">
        <!-- 关键字搜索 -->
        <el-form-item label="关键字" prop="keyword">
          <el-input
            style="width: 180px;"
            placeholder="请输入"
            v-model="interView.keyword"
            @keyup.enter="hSearch">
          </el-input>
        </el-form-item>
        <!-- 状态下拉框选择 -->
        <el-form-item label="状态" prop="state">
          <el-select
            placeholder="请选择"
            v-model="interView.state"
            @keyup.enter="hSearch">
            <el-option
              v-for="item in status"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 清除 搜索 按钮 -->
        <el-form-item>
          <el-button @click="hClear">清除</el-button>
          <el-button type="primary" @click="hSearch">搜索</el-button>
        </el-form-item>
        <el-button
          class="fr"
          icon="el-icon-edit"
          type="success"
          @click="hModify('add')">新增技巧
        </el-button>
      </el-form>
      <!-- 数据记录 -->
      <el-alert :title="alertText" show-icon></el-alert>
      <!-- 数据列表 -->
      <el-table
        :key="tableKey"
        :data="dataList"
        v-loading="listLoading"
        element-loading-text="给我一点时间"
        fit
        highlight-current-row
        style="width: 100%">
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="文章标题">
            <template slot-scope="scope">
              {{scope.row.title}}
              <i @click="player(scope.$index)"
                  v-if="scope.row.videoURL"
                  class="el-icon-film icon"></i>
            </template>
          </el-table-column>
          <el-table-column align="center" label="阅读数">
            <template slot-scope="scope">
              <span>{{scope.row.visits}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入人">
            <template slot-scope="scope">
              <span>{{scope.row.username}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="录入时间">
            <template slot-scope="scope">
              <span>{{scope.row.createTime | parseTimeByString("{y}-{m}-{d} {h}:{m}:{s}")}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state===1">已启用</span>
              <span v-else>已禁用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280">
            <template slot-scope="scope">
              <el-button type="text" @click="hPreview(scope.row)">预览</el-button>
              <el-button type="text" @click="hDisable(scope.row)">
                <!-- <span v-if="scope.row.state===1">禁用</span>
                <span v-else>启用</span> -->
                <span>{{scope.row.state ? '禁用': '启用'}}</span>
              </el-button>
              <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="hModify(scope.row.id)">修改</el-button>
              <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="hDel(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
          <!-- end -->
          <!-- 分页 -->
          <div class="pagination fr">
            <div class="pages">
              <el-pagination
              background
              @size-change="hSizeChange"
              @current-change="hPageChange"
              hide-on-single-page
              :current-page="Number(interView.page)"
              :total="Number(total)"
              :page-size="Number(interView.pagesize)"
              :page-sizes="[10,20,30, 50]"
              layout="prev, pager, next, sizes,jumper">
              </el-pagination>
            </div>
          </div>
          <!-- 播放视频 -->
          <div class="play">
            <el-dialog
              :visible.sync="dialogPlay"
              width="40%"
              ref="videoPlaty"
              id="popVideo"
              :before-close="closeVideo">
              <!-- 视频播放器 -->
              <video :src="videoUrl" controls autoplay class="video" width="100%"></video>
            </el-dialog>
          </div>
          <!-- 文章预览 -->
          <div class="preview">
            <el-dialog title="预览文章" :visible.sync="dialogArticle" width="45%">
              <articles-preview :preview="articlePreviews"></articles-preview>
            </el-dialog>
          </div>
          <!-- 新增技巧弹层 -->
          <Dialog ref="refArticles" :titleInfo="titleInfo" :formBase="curArticle" v-on:newDataes="getArticles"></Dialog>
    </el-card>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list, detail, remove, changeState } from '@/api/hmmm/articles'
// 文章添加
import Dialog from './../components/articles-add'
// 文章预览
import ArticlesPreview from './../components/articles-preview'
export default {
  name: 'Articles',
  components: {
    // 文章添加
    Dialog,
    // 文章预览框
    ArticlesPreview
  },
  data () {
    return {
      tableKey: 0, // 关键字
      dataList: [], // 获取的数据
      total: '', // 总条数
      listLoading: true, // 加载缓存
      alertText: '', // 数据有几条记录
      interView: {
        title: '', // 文章标题
        page: 1,
        pagesize: 10
      },
      // 弹窗播放视频
      dialogPlay: false,
      videoUrl: null,
      // 单文章预览
      articlePreviews: {},
      // 弹窗文章预览
      dialogArticle: false,
      counts: '',
      titleInfo: {
        pageTitle: '文章', // 页面标题
        text: '' // 新增、编辑文本
      },
      curArticle: {
        // isFamous: '',
        // shortName: '',
        // company: ''
      }
    }
  },
  computed: {
    status () {
      return status
    }
  },
  methods: {
    // 初始化数据
    initialDate () {
    // 读取数据
      this.getArticles()
    },
    // 获取列表数据
    async getArticles (params) {
      this.listLoading = true
      const { data: res } = await list(this.interView)
      console.log('获取列表项', res)
      // 获取数据给dataList
      this.dataList = res.items
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 关闭视频
    closeVideo () {
      this.videoUrl = ''
      this.dialogPlay = false
    },
    // 播放视频
    player (id) {
      console.log(this.dataList[id].videoURL)
      // this.$router.push(this.dataList[id].videoURL)
      // 弹窗
      this.dialogPlay = true
      // list中找到视频url地址赋值给 data
      this.videoUrl = this.dataList[id].videoURL
    },

    // 搜索关键字
    hSearch () {
      console.log(this.interView)
      this.interView.page = 1
      this.getArticles(this.interView)
      // this.dataList = this.dataList.filter(i => i.title.includes(this.interView.title))
    },
    // 清除
    hClear () {
      this.$refs.interView.resetFields()
      this.getArticles(this.interView)
    },
    // 每页显示信息条数
    hSizeChange (val) {
      this.interView.pagesize = val
      if (this.interView.page === 1) {
        this.getArticles(this.interView)
      }
    },
    // 进入某一页
    hPageChange (val) {
      this.interView.page = val
      this.getArticles()
    },

    // 窗口操作**********************************
    // 添加编辑之后表单清空
    query () {
      this.curArticle = {}
    },
    // 文章预览
    hPreview (item) {
      this.dialogArticle = true
      this.articlePreviews = item
    },
    // 新增文章、编辑文章
    hModify (id) {
      this.query()
      // 1.获取当前行数据,传给弹层
      console.log(id)
      // 2.显示弹层
      this.$refs.refArticles.dialogShow()
      if (id === 'add') {
        this.titleInfo.text = '新增' // 给弹层传参
      } else {
        this.titleInfo.text = '编辑' // 给弹层传参
        this.getForm(id)
      }
    },
    // 表单详情数据加载
    async getForm (objeditId) {
      this.curArticle.id = objeditId
      const { data: res } = await detail({ id: objeditId })
      // 获取详情 给formData
      this.curArticle = res
    },
    // 文章删除
    hDel (del) {
      this.$confirm('此操作将永久删除文章 ' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: del })
            .then(response => {
              this.$message.success('成功删除了文章' + '!')
              this.dataList.splice(del, 1)
              this.getArticles(this.interView)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
    // 状态启用、禁用
    async hDisable (item) {
      try {
        if (item.state === 1) {
          item.state = 0
        } else {
          item.state = 1
        }
        const res = await changeState(item)
        console.log(res)
        this.getArticles(this.interView)
        // this.loadArticleList()
        this.$message.success('操作成功')
      } catch (e) {}
    }
  },
  // 挂载结束
  mounted: function () {},
  // 创建完毕状态
  created () {
    var _this = this
    this.initialDate()
    // 键盘enter操作
    document.onkeydown = function (e) {
      var key = window.event.keyCode
      if (key === 13) {
        _this.hSearch(this.interView)
      }
    }
  },
  // 组件更新
  updated: function () {}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.pagination{
  padding: 20px;
}
.icon {
  font-size: 18px;
  color: #1924ff;
}
.play {
  ::v-deep .el-dialog__header {
    padding: 0;
    height: 0;
  }
  ::v-deep .el-dialog__close {
    color: #fff;
  }
  ::v-deep .el-dialog__headerbtn {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
  }
  ::v-deep .el-dialog__body {
    padding: 0;
  }
}
.video {
  display: block;
}
.preview {
  ::v-deep .el-dialog__body {
  padding-top: 0;
}
}
</style>
